<template>
	<view>
		<view class="phone-header">
			<image src="../images/lifepayBg.474226aa.png" mode="widthFix" style="width: 100%;display: flex;"></image>
			<view class="phone-header-tips check-this">
				<view>
					<image src="../images/lifeTab01.png" mode="widthFix" style="display: flex;width: 40upx;"></image>
				</view>
				<text>话费充值</text>
			</view>

			<view class="phone-header-tips" @click="jumpLife()" style="margin-left: 210rpx;">
				<view>
					<image src="../images/lifeTab01.png" mode="widthFix" style="display: flex;width: 40upx;"></image>
				</view>
				<text>电费充值</text>
			</view>
			
			<view class="phone-header-tips" @click="jumpLife()" style="margin-left: 480rpx;background-color: #00000033;">
				<view>
					<image src="/static/img/tw_icon.png" mode="widthFix" style="display: flex;width: 40upx;"></image>
				</view>
				<text style="color: white;">查看订单></text>
			</view>
		</view>
		<view style="padding: 20upx;margin-top: -140upx;position: relative;z-index: 22;">
			<view class="phone-container">
				<view class="phone-container-top">
					<view class="phone-container-top_title">
						<text>官方充值话费</text>
					</view>
				</view>
				<view class="phone-container-input">
					<input v-model="phone" type="number" maxlength="11" placeholder="请输入手机号码">
				</view>
				<!-- <view class="phone-container-group">
					<view class="phone-container-group_title">
						<text>运营商</text>
					</view>
					<view class="phone-container-group_list">
						<view class="phone-container-group_list-item base-4" :class="opSelect==item.id?'select':''" v-for="item in operatorList" :key="item.id" @click="opSelect = item.id">
							<text>{{item.name}}</text>
						</view>
						<view class="base-4"></view>
						<view class="base-4"></view>
					</view>
					
				</view> -->
				<view class="phone-container-group">
					<view class="phone-container-group_title">
						<text>充值套餐</text>
					</view>
					<view class="phone-container-group_list">
						<view class="phone-container-group_list-item base-3" :class="packageSelect==item.id?'select':''"
							v-for="item in packageList" :key="item.id"
							@click="packageSelect = item.id;realMoney=item.now_money">
							<view>
								<text style="font-size: 38upx;font-weight: bold;">{{item.name}}</text>
								<!-- <text style="font-size: 28upx;">元</text> -->
							</view>
							<view style="margin-top: 0;">
								<!-- <text style="font-size: 24upx;">官方价</text> -->
								<text style="font-size: 24upx;padding: 0 10upx;">¥{{item.now_money}}</text>
								<!-- <text style="font-size: 24upx;">元</text> -->
							</view>
						</view>
						<view class="base-3"></view>
					</view>
				</view>
			</view>
			<!-- <view class="phone-fav">
				<image src="../images/cardBg.0736fa09.png" mode="widthFix" style="display: flex;width: 100%;"></image>
				<view class="phone-fav-item">
					<view style="flex: 1;">
						<view style="display: flex;align-items: center;">
							<view>
								<image src="../images/managecard.png" mode="widthFix" style="display: flex;width: 36upx;"></image>
							</view>
							<text style="font-style:italic;font-weight: bold;padding-left: 10upx;">牛牛小卡片</text>
							<text style="color: #ffc4c4;padding-left: 10upx;">(余额：5.00)</text>
						</view>
						<view style="margin-top: 10upx;">
							<text style="">本单最多可抵扣￥</text>
							<text style="font-weight: bold;">3.20</text>
						</view>
					</view>
					<view @click="isSelect=!isSelect">
						<image src="../images/radio-select.png" mode="scaleToFill" v-show="isSelect" style="display: flex;width: 40upx;height: 40upx;"></image>
						<image src="../images/radio.png" mode="scaleToFill" v-show="!isSelect" style="display: flex;width: 40upx;height: 40upx;"></image>
					</view>
				</view>
			</view> -->
			<!-- <view class="phone-notices">
				<view>
					<text>购买须知</text>
				</view>
				<rich-text :nodes="notices"></rich-text>
			</view> -->
		</view>
		<view style="padding:8rpx 0">
			<dp :pagecontent="pagecontent"></dp>
		</view>
		<view style="height: 130upx;"></view>
		<view class="phone-fix-btm">
			<view class="phone-fix-btm-left">
				<view>
					合计：<text>¥{{realMoney||0}}</text>
				</view>
			</view>
			<view class="phone-fix-btm-btn">
				<view>
					<u-button type="error" shape="circle" @click="onSubmit">
						<text>立即购买</text>
					</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				opt:{},
				operatorList: [{
						name: "中国移动",
						id: 1,
						key: "yd"
					},
					{
						name: "中国联通",
						id: 2,
						key: "lt"
					},
					{
						name: "中国电信",
						id: 3,
						key: "dx"
					}
				],
				opSelect: 1,
				packageList: [
					// {name:"中国移动",id:1,key:"yd",price:"97.30",relPrice:"100.00"}
				],
				packageSelect: 0,
				isSelect: true,
				notices: "",
				phone: "",
				realMoney: "",
				pagecontent: ""
			};
		},
		onLoad(opt) {
			this.opt = app.getopts(opt);
			
			if(this.opt.token){
				this.setlogin();
				
			}else{
				this.checkIsopen();
				this.loadContent();
				this.loadData();
			}
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		},
		methods: {
			checkIsopen(){
				let that = this
				app.get("ApiLifePay/getIsopen", {
					type: "mobile",
				}, function(res) {
					if(res.status != 1){
						app.alert(res.msg);
					}
					
				});
			},
			setlogin() {
			  let that = this
			  app.post('ApiIndex/logintogether', { gtksession:that.opt.token }, function (res) {
				  if(res.status == 1){
					//	that.login_token = res.login_token
				  	uni.setStorageSync('login_token',res.login_token);
					that.checkIsopen();
					that.loadContent();
					that.loadData();
				  }
			  })
			},
			jumpOrder() {
				uni.navigateTo({
					url: "/pages/thirds/orderlist"
				})
			},
			jumpLife() {
				uni.navigateTo({
					url: "/pages/thirds/life/life"
				})
			},
			async loadContent() {
				var that = this;
				app.get("ApiLifePay/payRule", {
					type: "mobile",
				}, function(res) {
					const res1 = res.data;
					that.pagecontent = JSON.parse(res1.rule_info);
				});
			},
			async loadData() {
				var that = this;
				//   判断申请通过跳转商铺首页
				app.get("ApiLifePay/setMeal", {
					type: "mobile"
				}, function(res) {
					const res1 = res.data;
					that.packageList = res1;
				});
			},
			async pays(order_id) {
				const params = {
					order_id: order_id,
					order_type: 33,
					is_wechat: 2,
					payment: 11
				}
				const res = await this.$requestAll.thirds.lifePay(params, true)
				res.data.code = res.data.code.replace(/\%/g, "+");
				uni.navigateTo({
					url: "/other/pay/payCode?dd=" + encodeURIComponent(JSON.stringify(res.data))
				})
			},
			onSubmit() {
				if (!uni.$u.test.mobile(this.phone)) {
					uni.$u.toast("请输入正确的手机号码")
					return;
				}
				if (this.packageSelect == 0) {
					uni.$u.toast("请选择充值套餐")
					return;
				}
				uni.showLoading({
					mask: true
				})
				const params = {
					mobile: this.phone,
					money: this.realMoney,
					set_id: this.packageSelect
				}
				app.post('ApiLifePay/mobilePay', params,
					function(res) {
						app.showLoading(false);
						if (res.status == 0) {
							app.error(res.msg);
							return;
						}
						app.goto('/pages/pay/pay?id=' + res.data.payorderid);
					});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f9;
	}

	view {
		box-sizing: border-box;
	}

	.phone-header {
		position: relative;

		&-tips {
			position: absolute;
			padding: 10upx 16upx;
			border-radius: 80upx 80upx;
			background-color: #fee1e1;
			display: flex;
			align-items: center;
			bottom: 54%;
			left: 30upx;

			text {
				font-size: 28upx;
				color: #ff6767;
				padding-left: 10upx;
			}
		}

	}

	.phone-container {
		padding: 20upx;
		background-color: #fff;
		border-radius: 20upx 20upx;

		&-top {
			padding: 20upx;

			&-title {
				font-size: 28upx;
				font-weight: bold;
			}
		}

		&-input {
			border-bottom: 1px solid #ececec;
			padding: 20upx 20upx 10upx;

			input {
				color: #282828;
				font-size: 28upx;
			}
		}

		&-group {
			&_title {
				font-size: 26upx;
				font-weight: bold;
				margin: 20upx 0;
			}

			&_list {
				display: flex;
				width: 100%;
				justify-content: space-between;
				flex-wrap: wrap;

				&-item {
					border: 1px solid #ecebe6;
					border-radius: 10upx 10upx;
					font-size: 28upx;
					padding: 26upx 0upx;
					text-align: center;
					margin-bottom: 10upx;
				}

				.select {
					border: 1px solid #ff6767 !important;
					color: #ff6767 !important;
					background-color: #fffaf5;
				}
			}
		}
	}

	.base-4 {
		width: 24%;
	}

	.base-3 {
		width: 32%;
	}

	.phone-fav {
		position: relative;
		margin-top: 20upx;
		margin-bottom: 20upx;

		&-item {
			position: absolute;
			display: flex;
			align-items: center;
			width: 100%;
			padding: 0 40upx;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			color: #fff;
			font-size: 26upx;
		}
	}

	.phone-notices {
		padding: 20upx 20upx;
		border-radius: 20upx 20upx;
		background-color: #fff;

		text {
			font-size: 28upx;
			font-weight: bold;
		}
	}

	.phone-fix-btm {
		position: fixed;
		width: 100%;
		height: 120upx;
		display: flex;
		align-items: center;
		background-color: #fff;
		bottom: 0;
		left: 0;
		padding: 0 30upx;

		&-left {
			flex: 1;
			font-size: 28upx;

			text {
				color: #ff6767;
				font-weight: bold;
				font-size: 33upx;
			}
		}

		&-btn {
			width: 40%;
		}
	}

	.check-this {
		background: white;
	}
</style>